@use "@/styles/Radius.module.scss";
@use "@/styles/ScreenSizes.module.scss";
@use "@/styles/Spacings.module.scss";

.from_document_wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  column-gap: Spacings.$spacing05;
  justify-content: center;
  align-items: center;
  border: 1px dashed var(--border-0);
  border-radius: Radius.$big;
  box-sizing: border-box;
  cursor: pointer;

  &.dragging {
    border: 3px dashed var(--accent);
    background-color: var(--background-3);
  }

  .input {
    padding: Spacings.$spacing05;
    display: flex;
    gap: Spacings.$spacing02;

    @media (max-width: ScreenSizes.$small) {
      flex-direction: column;
    }

    .clickable {
      font-weight: bold;
    }
  }
}
